﻿<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { GeoImage } from '../../src/og/layer/GeoImage.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';

        var maxZIndex = 0;

        var osm = new XYZ("OpenStreetMap", {
        isBaseLayer: false,
        url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        visibility: true,
        extent: [[-10, 40], [20, 58]],
        attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        osm.events.on("lclick", function () {
        osm.setZIndex(++maxZIndex);
        });

        osm.events.on("touchstart", function () {
        osm.setZIndex(++maxZIndex);
        });

        var sat = new XYZ("MapQuest Satellite", {
        isBaseLayer: false,
        extent: [[-12, 38], [8, 53]],
        url: "https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
        visibility: true,
        attribution: `2014 MapQuest - Portions 2014 "Map data @
        <a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
        <a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
        });

        sat.events.on("lclick", function () {
        sat.setZIndex(++maxZIndex);
        });

        sat.events.on("touchstart", function () {
        sat.setZIndex(++maxZIndex);
        });

        var img = new GeoImage("UK.jpg", {
        src: "UK.jpg",
        shininess: 70,
        specular: [0.4, 0.4, 0.4],
        corners: [[-7.674585966211434, 59.25936136683274], [4.052821115801188, 58.19691969395908], [0.9659972036307729, 49.203405066507365], [-8.57191505617858, 50.31013492636263]],
        visibility: true,
        isBaseLayer: false,
        opacity: 1.0
        });

        img.events.on("lclick", function () {
        img.setZIndex(++maxZIndex);
        });

        img.events.on("touchstart", function () {
        img.setZIndex(++maxZIndex);
        });

        var globus = new Globe({
        "target": "globus",
        "name": "Earth",
        "terrain": new GlobusTerrain(),
        "layers": [osm, sat, img]
        });

        globus.planet.viewExtent(osm.getExtent());
    </script>
</body>

</html>